<template>
  <div class="search-header">
    <div class="search-configs">
      <el-select class="selectType" v-model="params.type" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-input
        class="selectText"
        v-model="params.keyword"
        placeholder="请输入内容"
      ></el-input>
      <el-button type="small" @click="searchFn" class="searchBtn btn"
        >查询</el-button
      >
      <el-button type="small" @click="restFn" class="restBtn btn"
        >重置</el-button
      >
    </div>
    <div class="buttons">
      <el-button
        type="small"
        v-if="addTenant"
        @click="addTenantFn"
        class="addTenantBtn"
        >新增租户</el-button
      >
      <el-button
        type="small"
        v-if="addScreen"
        @click="addScreenFn"
        class="addTenantBtn"
        >新增大屏</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchTable",
  props: {
    addScreen: Boolean,
    addTenant: Boolean,
  },
  data() {
    return {
      params: {
        keyword: "",
        type: 2,
      },
      options: [
        {
          value: 2,
          label: "全部",
        },
        {
          value: 1,
          label: "运行中",
        },
        {
          value: 0,
          label: "禁用中",
        },
      ],
    };
  },
  methods: {
    searchFn() {
      this.$emit("search", this.params);
    },
    restFn() {
      this.params = {
        keyword: "",
        type: 2,
      };
      this.$emit("search", this.params);
    },
    addTenantFn() {
      this.$emit("addTenantFn");
    },
    addScreenFn() {
      this.$emit("addScreenFn");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.search-header {
  width: 100%;
  overflow: hidden;
  .search-configs {
    width: 70%;
    float: left;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    .selectType {
      width: 150px;
      margin-right: 20px;
    }
    .selectText {
      width: 200px;
      margin-right: 20px;
    }
    .searchBtn {
      background: #00b3a8;
      border-color: #00b3a8;
      color: #fff;
    }
    ::v-deep .el-input__inner {
      height: 32px;
    }
  }
  .buttons {
    float: right;
    .addTenantBtn {
      background: #f0bf28;
      border-color: #f0bf28;
      color: #fff;
    }
  }
}
</style>
